<template>
  <el-dialog :visible="visible" title="图片导出" width="488px" @open="onOpen" @close="onClose">
    <el-form label-width="84px">
      <el-form-item label="导出样式" class="mb-4">
        <el-radio-group v-model="form.mimetype">
          <el-radio label="image/jpeg">JPG</el-radio>
          <el-radio label="image/png">PNG</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="导出页面" :class="{ 'mb-10': !mode }">
        <el-radio-group v-model="mode" @change="onChangeMode">
          <el-radio :label="0">部分页面</el-radio>
          <el-radio :label="1">全部页面</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="mode === 0" label="选择页面">
        <el-dropdown class="pageList-dropdown" trigger="hover" @visible-change="onVisibleChange">
          <div class="dropdown-toggle d-flex jc-between al-center bgc-white">
            <div class="d-flex">
              <span v-show="form.list.length === 0" class="t-light">请选择页面</span>
              <span v-show="form.list.length !== 0">已选{{ form.list.length }}个</span>
            </div>
            <i class="el-icon-arrow-down" :class="dropdownIn ? 'dropdown-in' : 't-light'"></i>
          </div>
          <el-dropdown-menu slot="dropdown" class="pageList-dropdown-menu">
            <el-checkbox-group v-model="form.list">
              <el-checkbox v-for="(page, i) in pageList" :key="i" :label="page">{{ page.name }}</el-checkbox>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" class="ml-24" :loading="loading" @click="onConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { widget2UI, createAnimate } from '@/utils';
  import { basicWidgetMap } from './landingPageWidget/map';

  export default {
    props: { dialogType: { type: String, default: '' } },
    inject: ['getPageConfigList', 'getWidgetConfigList'],
    data() {
      return {
        mode: 0,
        form: { mimetype: 'image/jpeg', list: [] },
        loading: false,
        dropdownIn: false,

        targetX: '',
        targetY: ''
      };
    },
    computed: {
      visible() {
        return this.dialogType === 'downloadImage';
      },
      pageList() {
        return this.pageConfigList.map((page, i) => ({
          id: page.id,
          pId: page.pId,
          name: page.name,
          size: page.size,
          componentData: this.widgetConfigList[i]
        }));
      },
      pageConfigList() {
        return this.getPageConfigList();
      },
      widgetConfigList() {
        return this.getWidgetConfigList();
      }
    },
    methods: {
      createAnimate,

      onChangeMode(mode) {
        if (mode === 0) this.form.list = [];
        if (mode === 1) this.form.list = this.pageList;
      },
      // 下拉多选
      onVisibleChange(visible) {
        this.dropdownIn = visible;
      },
      async onConfirm() {
        if (this.form.list.length === 0) {
          this.$message.error('请选择导出页面');
          return;
        }
        this.createAnimate(this.targetX, this.targetY);
        this.$EventBus.$emit('initTask');
        const pageData = this.form.list.map((page) => ({
          name: page.name,
          pId: page.pId,
          size: { w: page.size.width, h: page.size.height },
          components: page.componentData.map((widget) => widget2UI(widget, basicWidgetMap))
        }));
        const params = {
          type: 1,
          imgType: this.mimetype === 'image/jpeg' ? 1 : 2,
          configList: pageData.map((page) => ({
            configType: page.pId,
            wide: page.size.w,
            high: page.size.h,
            configName: page.name,
            configJson: JSON.stringify(page)
          }))
        };
        try {
          await this.$loading(this.$http.fetchAIImageList(params));
        } finally {
          this.$emit('update:dialogType', '');
        }
      },

      // 弹窗开启
      onOpen() {
        this.mode = 0;
        this.form = { mimetype: 'image/jpeg', list: [] };
        this.$nextTick(() => {
          this.targetX = document.documentElement.clientWidth / 2;
          this.targetY = document.documentElement.clientHeight / 1.5;
        });
      },

      // 弹窗关闭
      onClose() {
        this.$emit('update:dialogType', '');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .dropdown-toggle {
    border: 1px solid #cecece;
    border-radius: 4px;
    padding: 0 16px;
    width: 360px;
    line-height: 32px;
    cursor: pointer;

    .el-icon-arrow-down {
      border-radius: 50%;
      padding: 2px;
      transition: all 0.3s;

      &.dropdown-in {
        transform: rotate(180deg);
      }
    }
  }

  .pageList-dropdown-menu {
    margin: 5px 0;
    padding: 8px 16px 8px 12px;
    width: 360px;

    ::v-deep {
      .el-checkbox-group {
        display: flex;
        flex-direction: column;

        .el-checkbox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 0;
          padding: 8px 0;

          .el-checkbox__input {
            order: 1;
          }

          .el-checkbox__label {
            order: 0;
            padding: 0;
          }
        }
      }
    }
  }

  ::v-deep {
    .el-radio__label {
      display: inline-flex;
      align-items: center;
    }
  }
</style>
